<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入echarts文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <title>echarts的基本使用</title>
</head>

<body>
  <!-- 
    使用步骤
    1、引入echarts.js文件
    2、准备一个呈现图表的盒子
    3、初始化echarts实例对象
    4、准备配置项
    5、将配置项设置给echarts实例对象
   -->

  <!-- 准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px;"></div>
  <script>
    // 初始化echarts实例对象
    var mCharts = echarts.init(document.querySelector('div'));
    // 准备配置项
    var option = {
      // x轴
      xAxis: {
        type: 'category', // 类目录
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value' // 数值
      },
      //系列类表，每个系列通过type决定自己的图表类型
      series: [{
        name: '语文',
        // 表示是柱状图
        type: 'bar',
        // 折线图
        // type: 'line',
        // 饼状图
        // type: 'pie',
        data: [70, 94, 80]
      }]
    };

    // 将配置项设置给eCharts实例对象
    mCharts.setOption(option);
  </script>
</body>

</html>